<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: white;
            padding: 50px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        .container h2 {
            margin-bottom: 20px;
        }
        .container input, .container select {
            width: calc(100% - 22px);
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .container button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            background-color: #ff5000;
            border: none;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        .container button:hover {
            background-color: #e04a00;
        }
        .toggle-link {
            color: #ff5000;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>注册</h2>
    <input type="text" placeholder="用户名" id="register-account">
    <input type="password" placeholder="密码" id="register-password">
    <input type="email" placeholder="邮箱" id="register-email">
    <input type="text" placeholder="手机号" id="register-phone">
    <input type="text" placeholder="密码提示问题" id="register-question">
    <input type="text" placeholder="密码提示答案" id="register-asw">
    <select id="register-age">
        <option value="">请选择年龄</option>
    </select>
    <select id="register-sex">
        <option value="">请选择性别</option>
        <option value="1">男</option>
        <option value="0">女</option>
    </select>
    <input type="text" placeholder="姓名" id="register-name">
    <button onclick="register()">注册</button>
    <p>已有账户？ <a class="toggle-link" href="login">登录</a></p>
</div>

<script>
    function populateAgeOptions() {
        const ageSelect = document.getElementById('register-age');
        for (let i = 0; i <= 120; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            ageSelect.appendChild(option);
        }
    }

    function register() {
        const account = document.getElementById('register-account').value;
        const password = document.getElementById('register-password').value;
        const email = document.getElementById('register-email').value;
        const phone = document.getElementById('register-phone').value;
        const question = document.getElementById('register-question').value;
        const asw = document.getElementById('register-asw').value;
        const age = parseInt(document.getElementById('register-age').value);
        const sex = parseInt(document.getElementById('register-sex').value);
        const name = document.getElementById('register-name').value;

        if (!account || !password || !email || !phone || !question || !asw || isNaN(age) || isNaN(sex) || !name) {
            alert('请填写所有必填项');
            return;
        }

        fetch('/users/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                account: account,
                password: password,
                email: email,
                phone: phone,
                question: question,
                asw: asw,
                age: age,
                sex: sex,
                name: name,
                createTime: new Date().toISOString(), // 假定创建时间为当前时间
                updateTime: new Date().toISOString(), // 假定更新时间为当前时间
                del: 0 // 假定新注册的用户未被删除
            }),
        })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('注册失败');
                }
            })
            .then(data => {
                alert('注册成功');
                window.location.href = 'login';
            })
            .catch(error => {
                alert('注册失败：' + error.message);
            });
    }

    document.addEventListener('DOMContentLoaded', populateAgeOptions);
</script>
</body>
</html>
